<template>
  <div style="width: 100%">
    <Modal
        v-model="modals"
        scrollable
        footer-hide
        closable
      title="账单详情"
      :mask-closable="false"
      @on-cancel="cancel"
      width="1050"
    >
      <!-- <Divider dashed/> -->
      <Form
        ref="formValidate"
        :label-width="labelWidth"
        :label-position="labelPosition"
        class="tabform"
        @submit.native.prevent
      >
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="选择账单类型：" label-for="status1" v-if="currentTab === '2'">
              <Select v-model="formValidate.detail_type" @on-change="onDetailType"  placeholder="请选择" clearable element-id="status1">
                <Option value="order.income">订单明细</Option>
                <Option value="storage.fee">仓储费用</Option>
                <Option value="unloading.fee">入库费用</Option>
                <Option value="ob.fee">出库费用</Option>
                <Option value="shownroom.fee">展厅费用</Option>
                <Option value="special.charges">其他费用</Option>
              </Select>
            </FormItem>
          </Col>

          <Col>
            <div v-if="currentTab === '2'" class="search"  @click="searchs"><span>搜索</span></div>
          </Col>
          <Col>
            <div v-if="currentTab === '2'" class="reset" @click="reset">重置</div>
          </Col>
        </Row>
      </Form>
      <!-- <Divider dashed/> -->

      <div class="product_tabs tabbox">
        <Tabs v-model="currentTab">
          <TabPane
              v-for="(item, index) in headTab"
              :key="index"
              :label="item.title"
              :name="item.name"
          ></TabPane>
        </Tabs>
      </div>

      <div v-show="currentTab === '1'" class="table" style="margin-top: 20px">
        <Row>
          <Col span="20" offset="2" style="padding-top: 10px;">
            <Steps :current="SettlementSummary.type -1">
              <Step title="处理中" :content="this.formattedDate(SettlementSummary.in_progress_time)"></Step>
              <Step title="供应商确认中" :content="(SettlementSummary.type -1) >= 1?this.formattedDate(SettlementSummary.in_settlement_time):''"></Step>
              <Step title="待付款" :content="(SettlementSummary.type -1) >= 2?this.formattedDate(SettlementSummary.settled_time):''"></Step>
              <Step title="付款完成" :content="(SettlementSummary.type -1) >= 3?this.formattedDate(SettlementSummary.paid_time):''"></Step>
            </Steps>
          </Col>
          <Col span="20">
            <div class="section">
              <div class="title">账单</div>
              <ul class="list">
                <!--                <li class="item">-->
                <!--                  <Icon type="logo-usd" />-->
                <!--                </li>-->
                <li class="item">
                  <div>收款 金额：</div>
                  <div class="value">
                    <Numeral :value="SettlementSummary.ending_balance" format="0,0.00">
                      <template #prefix>
                        <strong>$</strong>
                      </template>
                    </Numeral>
                  </div>
                </li>
                <li class="item">
                  <div>销售 收入：</div>
                  <div class="value">
                    <Numeral :value="SettlementSummary.sales_revenue" format="0,0.00">
                      <template #prefix>
                        <strong>$</strong>
                      </template>
                    </Numeral>
                  </div>
                </li>
                <li class="item">
                  <div>费用：</div>
                  <div class="value">
                    <Numeral :value="SettlementSummary.costs" format="0,0.00">
                      <template #prefix>
                        <strong>$</strong>
                      </template>
                    </Numeral>
                  </div>
                </li>
                <li class="item" v-if="SettlementSummary.type == 1">
                  <Button type="primary" @click="confirm(SettlementSummary)">确认账单</Button>
                </li>
                <li class="item" v-if="SettlementSummary.type == 3">
                  <Button type="primary" @click="confirmPaid(SettlementSummary)">确认付款</Button>
                </li>
                <li class="item" v-if="SettlementSummary.type ==4"><a :href="SettlementSummary.file_url" target="_blank">付款凭证</a></li>
              </ul>
            </div>
          </Col>
          <Col span="12">
            <div style="padding: 20px 0;">
              <Card :bordered="false"  class="ivu-mt" style="width:100%;height: 500px;" shadow bordered>
                <template #title>销售收入</template>
                <div class="sales">
                  <div class="sales-title"></div>
                  <div class="sales-debits"></div>
                  <div class="sales-credits">收入</div>
                </div>

                <div class="sales" v-for="(val, i) in SettlementSummary.system_supplier_bill_summary" :key="i" v-if="val.type == 'sales'">
                  <div class="sales-title">{{val.title}}</div>
                  <div class="sales-debits"></div>
                  <div class="sales-credits">
                    <Numeral :value="val.credits" format="0,0.00">
                      <template #prefix>
                        <strong>$</strong>
                      </template>
                    </Numeral>
                  </div>
                </div>

                <div class="sales sales-bottom">
                  <div class="sales-title">小结</div>
                  <div class="sales-debits"></div>
                  <div class="sales-credits">
                    <Numeral :value="SettlementSummary.sales_revenue" format="0,0.00">
                      <template #prefix>
                        <strong>$</strong>
                      </template>
                    </Numeral>
                  </div>
                </div>

              </Card>
            </div>
          </Col>
          <Col span="12">
            <div style="padding: 20px 0;">
              <Card :bordered="false"  class="ivu-mt" style="width:100%;height: 500px;" shadow bordered>
                <template #title>费用</template>
                <div class="sales">
                  <div class="sales-title"></div>
                  <div class="sales-debits">扣款</div>
                  <div class="sales-credits"></div>
                </div>

                <div class="sales" v-for="(val, i) in SettlementSummary.system_supplier_bill_summary" :key="i" v-if="val.type == 'costs'">
                  <div class="sales-title">{{val.title}}</div>
                  <div class="sales-debits">
                    <Numeral :value="val.debits" format="0,0.00">
                      <template #prefix>
                        <strong>$</strong>
                      </template>
                    </Numeral>
                  </div>
                  <div class="sales-credits"></div>
                </div>

                <div class="sales sales-bottom">
                  <div class="sales-title">小结</div>
                  <div class="sales-debits">
                    <Numeral :value="SettlementSummary.costs" format="0,0.00">
                      <template #prefix>
                        <strong>$</strong>
                      </template>
                    </Numeral>
                  </div>
                  <div class="sales-credits"></div>
                </div>
              </Card>
            </div>
          </Col>

        </Row>
      </div>

      <div v-show="currentTab === '2'" class="table">
        <Button
            v-if="formValidate.detail_type == 'special.charges' && SettlementSummary.type == 1"
            type="primary"
            style="margin-top: 20px;"
            @click="menusAdd('添加规则')"
        >添加其他费用</Button>

        <table class="price-table" v-if="formValidate.detail_type == 'order.income' && tabList.length >= 1">
          <thead>
          <tr>
            <th></th>
            <th>订单收入</th>
            <th>出库费</th>
            <th>平台佣金</th>
            <th>运输费</th>
          </tr>
          </thead>
          <tbody >
            <tr>
              <td>
                总计
              </td>
              <td>
                <Numeral :value="SettlementSummary.sales_revenue" format="0,0.00">
                  <template #prefix>
                    <strong>$</strong>
                  </template>
                </Numeral>
              </td>
              <td v-for="(item,index) in SettlementSummary.system_supplier_bill_summary" :key="index" v-if="item.en_title == 'ob_fee'">
                <Numeral :value="item.debits" format="0,0.00">
                  <template #prefix>
                    <strong>$</strong>
                  </template>
                </Numeral>
              </td>
              <td v-for="(item,index) in SettlementSummary.system_supplier_bill_summary" :key="index" v-if="item.en_title == 'halfwarehouse_service_fee'">
                <Numeral :value="item.debits" format="0,0.00">
                  <template #prefix>
                    <strong>$</strong>
                  </template>
                </Numeral>
              </td>
              <td v-for="(item,index) in SettlementSummary.system_supplier_bill_summary" :key="index" v-if="item.en_title == 'shipping_fee'">
                <Numeral :value="item.debits" format="0,0.00">
                  <template #prefix>
                    <strong>$</strong>
                  </template>
                </Numeral>
              </td>
            </tr>
          </tbody>
        </table>

        <table class="price-table" v-if="formValidate.detail_type == 'storage.fee' && tabList.length >= 1">
          <thead>
          <tr>
            <th></th>
            <th>仓储费</th>
          </tr>
          </thead>
          <tbody >
          <tr>
            <td>
              总计
            </td>
            <td v-for="(val, i) in SettlementSummary.system_supplier_bill_summary" :key="i" v-if="val.en_title == 'storage_fee'">
              <Numeral :value="val.debits" format="0,0.00">
                <template #prefix>
                  <strong>$</strong>
                </template>
              </Numeral>
            </td>
          </tr>
          </tbody>
        </table>

        <table class="price-table" v-if="formValidate.detail_type == 'unloading.fee' && tabList.length >= 1">
          <thead>
          <tr>
            <th></th>
            <th>入库费</th>
          </tr>
          </thead>
          <tbody >
          <tr>
            <td>
              总计
            </td>
            <td v-for="(val, i) in SettlementSummary.system_supplier_bill_summary" :key="i" v-if="val.en_title == 'unloading_fee'">
              <Numeral :value="val.debits" format="0,0.00">
                <template #prefix>
                  <strong>$</strong>
                </template>
              </Numeral>
            </td>
          </tr>
          </tbody>
        </table>

        <table class="price-table" v-if="formValidate.detail_type == 'ob.fee' && tabList.length >= 1">
          <thead>
          <tr>
            <th></th>
            <th>出库费用</th>
          </tr>
          </thead>
          <tbody >
          <tr>
            <td>
              总计
            </td>
            <td v-for="(val, i) in SettlementSummary.system_supplier_bill_summary" :key="i" v-if="val.en_title == 'ob_fee'">
              <Numeral :value="val.debits" format="0,0.00">
                <template #prefix>
                  <strong>$</strong>
                </template>
              </Numeral>
            </td>
          </tr>
          </tbody>
        </table>

        <table class="price-table" v-if="formValidate.detail_type == 'shipping.fee' && tabList.length >= 1">
          <thead>
          <tr>
            <th></th>
            <th>入库费</th>
          </tr>
          </thead>
          <tbody >
          <tr>
            <td>
              总计
            </td>
            <td v-for="(val, i) in SettlementSummary.system_supplier_bill_summary" :key="i" v-if="val.en_title == 'shipping_fee'">
              <Numeral :value="val.debits" format="0,0.00">
                <template #prefix>
                  <strong>$</strong>
                </template>
              </Numeral>
            </td>
          </tr>
          </tbody>
        </table>

        <table class="price-table" v-if="formValidate.detail_type == 'special.charges' && tabList.length >= 1">
          <thead>
          <tr>
            <th></th>
            <th>费用</th>
          </tr>
          </thead>
          <tbody >
          <tr>
            <td>
              总计
            </td>
            <td v-for="(val, i) in SettlementSummary.system_supplier_bill_summary" :key="i" v-if="val.en_title == 'special_charges'">
              <Numeral :value="val.debits" format="0,0.00">
                <template #prefix>
                  <strong>$</strong>
                </template>
              </Numeral>
            </td>
          </tr>
          </tbody>
        </table>


        <Table
            :columns="columns"
            :data="tabList"
            ref="table"
            class="mt25"
            :loading="loading"
            highlight-row
            no-userFrom-text="暂无数据"
            no-filtered-userFrom-text="暂无筛选结果"
            height="450"
        >

          <template #created_at="{ row }">
            <strong>{{ formatTimeNative(row.created_at) }}</strong>
          </template>

          <template slot="month">
            <p>{{ SettlementSummary.period_range}}</p>
          </template>

          <template  slot-scope="{ row }" slot="receive_time">
            <p>{{ row.receive_time}}</p>
          </template>


          <template  slot-scope="{ row }" slot="remarks">
            <p>{{ row.remarks}}</p>
          </template>


          <template slot-scope="{ row }" slot="is_pay">
            <Tag color="gold" v-if="row.is_pay == 0">未付款</Tag>
            <Tag color="green" v-if="row.is_pay == 1">已付款</Tag>
          </template>
          <template slot-scope="{ row }" slot="is_mention">
            <Tag color="gold" v-if="row.is_mention == 1">已发货</Tag>
            <Tag color="green" v-if="row.is_mention == 0">未发货</Tag>
          </template>
          <template slot-scope="{ row }" slot="location">
            <p>CA 5005</p>
          </template>

          <template slot-scope="{ row }" slot="ob_no">
            <p>{{ row.ob_no }}</p>
          </template>

          <template slot-scope="{ row }" slot="discounted_total_set">
            <span>
              <Numeral :value="row.discounted_total_set" format="0,0.00">
                  <template #prefix>
                      <strong>$</strong>
                  </template>
              </Numeral>
            </span>
          </template>
          <template slot-scope="{ row }" slot="ob_fee">
            <span>
              <Numeral :value="row.ob_fee" format="0,0.00">
                  <template #prefix>
                      <strong>$</strong>
                  </template>
              </Numeral>
            </span>
          </template>

          <template slot-scope="{ row }" slot="shipping_fee">
            <span>
              <Numeral :value="row.shipping_fee" format="0,0.00">
                  <template #prefix>
                      <strong>$</strong>
                  </template>
              </Numeral>
            </span>
          </template>

          <template slot-scope="{ row }" slot="commission">
            <span>
              <Numeral :value="row.commission" format="0,0.00">
                  <template #prefix>
                      <strong>$</strong>
                  </template>
              </Numeral>
            </span>
          </template>

          <template slot-scope="{ row }" slot="price">
            <span>
              <Numeral :value="row.price" format="0,0.00">
                  <template #prefix>
                      <strong>$</strong>
                  </template>
              </Numeral>
            </span>
          </template>

          <template slot-scope="{ row }" slot="amount">
            <span>
              <Numeral :value="row.amount" format="0,0.00">
                  <template #prefix>
                      <strong>$</strong>
                  </template>
              </Numeral>
            </span>
          </template>

          <template slot-scope="{ row }" slot="cost">
            <span>
              <Numeral :value="row.cost" format="0,0.00">
                  <template #prefix>
                      <strong>$</strong>
                  </template>
              </Numeral>
            </span>
          </template>

          <template slot-scope="{ row }" slot="compute">
            <span>{{ row.compute == 'increment'? "增加":"减少" }}</span>
          </template>

          <template slot-scope="{ row, index }" slot="action">
            <a @click="detailsInfo(row)" v-if="formValidate.detail_type == 'storage.fee'">账单详情</a>
            <a @click="editSpecialCharges(row)" v-if="formValidate.detail_type == 'special.charges' && SettlementSummary.type == 1">编辑</a>
            <Divider type="vertical" v-if="formValidate.detail_type == 'special.charges' && SettlementSummary.type == 1"/>
            <a @click="delspecialCharges(row)" v-if="formValidate.detail_type == 'special.charges' && SettlementSummary.type == 1">删除</a>
          </template>

        </Table>
      </div>
    </Modal>
    <Modal
        v-model="ohterModal"
        title="添加其他费用"
        @on-ok="ohtherOk"
        @on-cancel="ohterCancel">
        <div class="other-title"><div class="divStyle">费用标题:</div><Input v-model="costsTitle" placeholder="请输入标题" style="width: 300px;margin-left: 10px;"/></div>
        <div class="other-title"><div class="divStyle">费用金额:</div>
          <InputNumber  v-model="costsAmount" maxlength="6" show-word-limit :max="100000" :min="1" style="width: 300px;margin-left: 10px;"/>
        </div>
      <div class="other-title"><div class="divStyle">备注:</div>
        <Input v-model="remarks" maxlength="300" show-word-limit type="textarea" placeholder="Enter something..." style="width: 300px;margin-left: 10px;" />
      </div>
      <div class="other-title"><div class="divStyle">计算:</div>
        <RadioGroup v-model="vertical" style="margin-left: 10px;">
            <Radio label="increment">
                <Icon type="social-apple"></Icon>
                <span>增加</span>
            </Radio>
            <Radio label="decrement">
                <Icon type="social-android"></Icon>
                <span>减少</span>
            </Radio>
        </RadioGroup>
    </div>
    </Modal>
    <Modal
        v-model="warehouseModals"
        scrollable
        footer-hide
        closable
        title="仓租详情"
        :mask-closable="false"
        width="950"
    >
      <table class="price-table">
        <thead>
        <tr>
          <th>总金额</th>
          <th>${{the_total.one_price_field.toFixed(2) }}</th>
          <th>${{the_total.two_price_field.toFixed(2)}}</th>
          <th>${{the_total.three_price_field.toFixed(2)}}</th>
          <th>${{the_total.four_price_field.toFixed(2)}}</th>
          <th v-if="location_id != 101816795504">${{the_total.five_price_field.toFixed(2)}}</th>
        </tr>
        <tr v-if="location_id == 101816795504">
          <th>类型</th>
          <th>0-35天</th>
          <th>36-60天</th>
          <th>61-180天</th>
          <th>大于180天</th>
        </tr>
        <tr v-else>
          <th>类型</th>
          <th>0-30天</th>
          <th>31-90天</th>
          <th>91-270天</th>
          <th>271-390天</th>
          <th>大于390天</th>
        </tr>
        </thead>
        <tbody >
        <tr v-if="location_id == 101816795504">
          <td>
            <Tag color="cyan">普通产品</Tag>
          </td>
          <td>每天 $0/m³</td>
          <td>每天 $0.5/m³</td>
          <td>每天 $0.8/m³</td>
          <td>每天 $1.2/m³</td>
        </tr>
        <tr v-else-if="supplier_type == 1">
          <td>
            <Tag color="cyan">普通产品</Tag>
          </td>
          <td>每天 $0/m³</td>
          <td>每天 $0.5/m³</td>
          <td>每天 $0.5/m³</td>
          <td>每天 $0.5/m³</td>
          <td>每天 $0.5/m³</td>
        </tr>
        <tr v-else>
          <td>
            <Tag color="cyan">普通产品</Tag>
          </td>
          <td v-if="warehouse_type == 1">每天 $0/m³</td>
          <td v-if="warehouse_type == 1">每天 $0.45/m³</td>
          <td v-if="warehouse_type == 1">每天 $0.6/m³</td>
          <td v-if="warehouse_type == 1">每天 $1.0/m³</td>
          <td v-if="warehouse_type == 1 && location_id != 101816795504">每天 $1.5/m³</td>

          <td v-if="warehouse_type == 0">每天 $0.3/m³</td>
          <td v-if="warehouse_type == 0">每天 $0.3/m³</td>
          <td v-if="warehouse_type == 0">每天 $0.45/m³</td>
          <td v-if="warehouse_type == 0">每天 $1.0/m³</td>
          <td v-if="warehouse_type == 0 && location_id != 101816795504">每天 $1.5/m³</td>
        </tr>
        <tr>
        <td>
          </td>
          <td>{{ ordinary.one_tj_field.toFixed(2) }}m³</td>
          <td>{{ ordinary.two_tj_field.toFixed(2) }}m³</td>
          <td>{{ ordinary.three_tj_field.toFixed(2) }}m³</td>
          <td>{{ ordinary.four_tj_field.toFixed(2) }}m³</td>
          <td v-if=" location_id != 101816795504">{{ ordinary.five_tj_field.toFixed(2) }}m³</td>
        </tr>
        <tr v-if="supplier_type == 2">
          <td>
            <Tag color="red">特殊尺寸</Tag>
          </td>
          <td v-if="warehouse_type == 1">每天 $0/m³</td>
          <td v-if="warehouse_type == 1">每天 $0.59/m³</td>
          <td v-if="warehouse_type == 1">每天 $0.78/m³</td>
          <td v-if="warehouse_type == 1">每天 $1.3/m³</td>
          <td v-if="warehouse_type == 1">每天 $1.95/m³</td>

          <td v-if="warehouse_type == 0">每天 $0.39/m³</td>
          <td v-if="warehouse_type == 0">每天 $0.39/m³</td>
          <td v-if="warehouse_type == 0">每天 $0.59/m³</td>
          <td v-if="warehouse_type == 0">每天 $1.3/m³</td>
          <td v-if="warehouse_type == 0">每天 $1.95/m³</td>
        </tr>
        <tr v-if="supplier_type == 2">
          <td></td>
          <td>{{ special.one_tj_field.toFixed(2) }}m³</td>
          <td>{{ special.two_tj_field.toFixed(2) }}m³</td>
          <td>{{ special.three_tj_field.toFixed(2) }}m³</td>
          <td>{{ special.four_tj_field.toFixed(2) }}m³</td>
          <td>{{ special.five_tj_field.toFixed(2) }}m³</td>
        </tr>
        </tbody>
      </table>

      <Table
          :columns="warehousecolumns"
          :data="warehouseTabList"
          ref="table"
          :loading="loading"
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
          class="table"
          height="300"
      >
        <template slot-scope="{ row, index }" slot="type">
          <Tag v-if="row.type == 2" color="red">特殊尺寸</Tag>
          <Tag v-if="row.type == 1" color="green">普通产品</Tag>
        </template>
        <template slot-scope="{ row, index }" slot="number">
          <span v-if="row.pm == 0" class="colorgreen">- {{ row.number }}</span>
          <span v-if="row.pm == 1" class="colorred">+ {{ row.number }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="nickname">
          <span>{{ row.uid ? row.user_nickname : '游客' }}</span>
        </template>
      </Table>
    </Modal>
    <Modal
        v-model="paidModel"
        title="确认付款"
        :mask-closable="false"
        width="950"
        @on-ok="confirmPaidOk"
        @on-cancel="confirmPaidCancel"
    >

      <Form
          ref="formDynamic"
          :model="formPaid"
          class="attrFrom"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
      >
        <Row :gutter="24">
          <Col span="24" class="mb15">
            <FormItem label="附件" prop="no">
              <Upload
                  :action="fileUrl"
                  :headers="header"
                  :max-size="5*1024"
                  :multiple="true"
                  :on-success="handleSuccess"
                  :on-remove="handleremove"
              >
                <Button icon="ios-cloud-upload-outline">上传文件</Button>
              </Upload>
              <img :src="formPaid.file_url" v-if="formPaid.file_url" width="120px" height="80px" alt="">
              <Image :src="formPaid.file_url" fit="contain" width="120px" height="80px" preview :preview-list="urlList" :initial-index="1" />
            </FormItem>
          </Col>
        </Row>

      </Form>

    </Modal>
  </div>
</template>

<script>
import {
  getSupplierList,
  addOtherCostsApi, supplierBillSurePaid, supplierSummaryInfo
} from '@/api/supplier';
import { mapState } from 'vuex';
import {supplierBillSummaryList} from "@api/supplierBill";
import util from "@/libs/util";
import Setting from "@/setting";


export default {
  name: 'commissionDetails',
  data() {
    return {
      fileUrl: Setting.apiBaseURL + "/file/upload",
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      currentTab: '1',
      onClickTab(e) {
        this.tab = e;
      },
      headTab: [
        { title: "账单", name: "1" },
        { title: "账单明细", name: "2" },
      ],
      ordinary:{
        one_tj_field:0,
        two_tj_field:0,
        three_tj_field:0,
        four_tj_field:0,
        five_tj_field:0,
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
        one_price_field:0,
        two_price_field:0,
        three_price_field:0,
        four_price_field:0,
        five_price_field:0,
      },
      special:{
        one_tj_field:0,
        two_tj_field:0,
        three_tj_field:0,
        four_tj_field:0,
        five_tj_field:0,
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
        one_price_field:0,
        two_price_field:0,
        three_price_field:0,
        four_price_field:0,
        five_price_field:0,
      },
      the_total:{
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
        one_price_field:0,
        two_price_field:0,
        three_price_field:0,
        four_price_field:0,
        five_price_field:0,
      },
      modals: false,
      warehouseModals:false,
      warehouse_type:"",
      supplier_type:"",
      vertical: 'increment',
      ohterModal: false,
      paidModel:false,
      formPaid:{},
      formPaidRules:[],
      header: {},
      urlList:[],
      costsTitle: '',
      costsAmount: '',
      remarks: '',
      detailsData: {},
      Ids: 0,
      loading: false,
      supplierList: [],
      SettlementSummary: {},
      ids: '',
      location_id:"",
      formValidate: {
        ids: '',
        supplier_id: '',
        relation_id:"",
        data:"",
        keyword: '',
        detail_type: '',
        page: 1,
        limit: 500,
      },
      total: 0,
      columns: [],
      warehousecolumns: [],
      warehouseCacolumns: [
        {
          title: '类型',
          key: 'type',
          slot: "type",
          minWidth: 120,
        },
        {
          title: 'sku',
          key: 'no',
          minWidth: 120,
        },
        {
          title: '0-30天',
          key: 'one_field',
          minWidth: 80,
        },
        {
          title: '31-90天',
          key: 'two_field',
          minWidth: 80,
        },
        {
          title: '91-270天',
          key: 'three_field',
          minWidth: 80,
        },
        {
          title: '271-390天',
          key: 'four_field',
          ellipsis: true,
          minWidth: 80,
        },
        {
          title: '大于390天',
          key: 'five_field',
          minWidth: 80,
        }
      ],
      warehouseHoustoncolumns: [
        {
          title: '类型',
          key: 'type',
          slot: "type",
          minWidth: 120,
        },
        {
          title: 'sku',
          key: 'no',
          minWidth: 120,
        },
        {
          title: '0-35天',
          key: 'one_field',
          minWidth: 80,
        },
        {
          title: '36-60天',
          key: 'two_field',
          minWidth: 80,
        },
        {
          title: '61-180天',
          key: 'three_field',
          minWidth: 80,
        },
        {
          title: '大于181天',
          key: 'four_field',
          ellipsis: true,
          minWidth: 80,
        }
      ],
      tabList: [],
      warehouseTabList: [],
      orderIncomeColumns: [
        {
          title: "账期",
          key: 'created_at',
          slot: 'created_at',
          width: 90,
        },
        {
          title: "订单号",
          key: 'order_no',
          minWidth: 150,
        },
        {
          title: "商品信息",
          key: 'name',
          minWidth: 200,
        },
        {
          title: 'SKU',
          key: 'sku',
          minWidth: 120,
        },
        {
          title: "订单收入",
          slot: 'discounted_total_set',
          minWidth: 80,
        },
        {
          title: "付款状态",
          slot: 'is_pay',
          minWidth: 80,
        },
        {
          title: "发货状态",
          slot: 'is_mention',
          minWidth: 80,
        },
        {
          title: "地址",
          slot: 'location',
          minWidth: 80,
        },
        {
          title: "出库单号",
          slot: 'ob_no',
          minWidth: 120,
        },
        {
          title: "出库费",
          slot: 'ob_fee',
          minWidth: 80,
        },
        {
          title: "平台佣金",
          slot: 'commission',
          minWidth: 80,
        },
        {
          title:  "运输费",
          slot: 'shipping_fee',
          minWidth: 80,
        },
      ],
      storageFeeColumns: [
        {
          title: "日期",
          key: 'time',
          width: 150,
        },
        {
          title: "名称",
          key: 'name',
          minWidth: 150,
        },
        {
          title: "仓储费",
          key: 'amount',
          slot: 'amount',
          minWidth: 150,
        },
        {
          title: "操作",
          slot: 'action',
          minWidth: 120,
          align: 'center',
        },
      ],
      obFeeColumns: [
        {
          title: '日期',
          key: 'archiving_period',
          width: 150,
        },
        {
          title: "出库单号",
          key: 'out_bounding_biz_no',
          minWidth: 150,
        },
        {
          title: '费用',
          key: 'cost',
          slot: 'cost',
          minWidth: 150,
        }
      ],
      unloadingFeeColumns: [
        {
          title: '日期',
          key: 'receive_time',
          width: 150,
        },
        {
          title: "入库单号",
          key: 'biz_no',
          minWidth: 150,
        },
        {
          title: '费用',
          key: 'cost',
          slot: 'cost',
          minWidth: 150,
        }
      ],
      specialFeeColumns:[
        {
          title: "标题",
          key: 'title',
          width: 150,
        },
        {
          title: '费用',
          key: 'cost',
          slot: 'cost',
          minWidth: 150,
        },
        {
          title: '计算方式',
          key: 'compute',
          slot: 'compute',
          minWidth: 150,
        },
        {
          title: '备注',
          key: 'remarks',
          slot: 'remarks',
          minWidth: 150,
        },
        {
          title: '操作人',
          key: 'account',
          minWidth: 150,
        },
        {
          title: "操作",
          slot: 'action',
          minWidth: 120,
          align: 'center',
        },
      ],
      shownroomFeeColumns: [
        {
          title: '日期',
          key: 'month',
          slot:'month',
          width: 150,
        },
        {
          title: "租赁总平方",
          key: 'area',
          minWidth: 150,
        },
        {
          title: "地址",
          key: 'name',
          minWidth: 150,
        },
        {
          title: "展位编码",
          key: 'store_warehouse_exhibition_id',
          minWidth: 150,
        },
        {
          title: "尺寸(米)",
          key: 'size',
          minWidth: 150,
        },
        {
          title: "租金",
          key: 'price',
          slot: 'price',
          minWidth: 150,
        },
      ],
      bili_id:0,
    };
  },
  computed: {
    ...mapState('admin/layout', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'left';
    },
  },
  mounted() {
    this.getSupplierList();
    this.getToken();
  },
  methods: {
    handleremove(){
      this.formPaid.file_url = "";
      this.urlList = []
    },
    onDetailType(){
      this.tabList = [];
    },
    getToken() {
      this.header["Authori-zation"] = "Bearer " + util.cookies.get("token");
    },
    supplierSummaryInfo(id,data){
      this.bili_id = id
      this.formValidate.data = data.data
      supplierSummaryInfo(id,data).then((res) => {
        this.SettlementSummary = res.data.info
        this.warehouse_type = this.SettlementSummary.system_supplier.warehouse_type
        this.supplier_type = this.SettlementSummary.system_supplier.type
      }).catch((res) => {
        this.$Message.error(res.msg);
      });
    },
    // 账单详情
    detailsInfo(row) {
      console.log("location_id:",row.location_id)
      this.warehouseModals = true;
      this.location_id = row.location_id

      if (this.location_id == 101816795504){
        this.warehousecolumns = this.warehouseHoustoncolumns
      }else {
        this.warehousecolumns = this.warehouseCacolumns
      }

      this.warehouseTabList = JSON.parse(row.details_json);
      this.the_total = {
        one_tj_field:0,
        two_tj_field:0,
        three_tj_field:0,
        four_tj_field:0,
        five_tj_field:0,
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
        one_price_field:0,
        two_price_field:0,
        three_price_field:0,
        four_price_field:0,
        five_price_field:0,
      }
      this.ordinary = {
        one_tj_field:0,
        two_tj_field:0,
        three_tj_field:0,
        four_tj_field:0,
        five_tj_field:0,
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
        one_price_field:0,
        two_price_field:0,
        three_price_field:0,
        four_price_field:0,
        five_price_field:0,
      }
      this.special = {
        one_tj_field:0,
        two_tj_field:0,
        three_tj_field:0,
        four_tj_field:0,
        five_tj_field:0,
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
        one_price_field:0,
        two_price_field:0,
        three_price_field:0,
        four_price_field:0,
        five_price_field:0,
      }


      // 语法：for(初始化; 条件; 增量)
      for (let i = 0; i < this.warehouseTabList.length; i++) {
        this.the_total.one_field += this.warehouseTabList[i].one_field
        this.the_total.one_price_field += this.warehouseTabList[i].one_price_field
        this.warehouseTabList[i].one_price_field = this.warehouseTabList[i].one_price_field.toFixed(2)


        this.the_total.two_field += this.warehouseTabList[i].two_field
        this.the_total.two_price_field += this.warehouseTabList[i].two_price_field
        this.warehouseTabList[i].two_price_field = this.warehouseTabList[i].two_price_field.toFixed(2)


        this.the_total.three_field += this.warehouseTabList[i].three_field
        this.the_total.three_price_field += this.warehouseTabList[i].three_price_field
        this.warehouseTabList[i].three_price_field = this.warehouseTabList[i].three_price_field.toFixed(2)


        this.the_total.four_field += this.warehouseTabList[i].four_field
        this.the_total.four_price_field += this.warehouseTabList[i].four_price_field
        this.warehouseTabList[i].four_price_field = this.warehouseTabList[i].four_price_field.toFixed(2)


        this.the_total.five_field += this.warehouseTabList[i].five_field
        this.the_total.five_price_field += this.warehouseTabList[i].five_price_field
        this.warehouseTabList[i].five_price_field = this.warehouseTabList[i].five_price_field.toFixed(2)



        if (this.warehouseTabList[i].type == 1){
          if (this.warehouseTabList[i].one_field > 0){
            this.ordinary.one_field += this.warehouseTabList[i].one_field
            this.ordinary.one_price_field += this.warehouseTabList[i].one_price_field
            this.ordinary.one_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].one_field
          }
            if (this.warehouseTabList[i].two_field > 0) {
            this.ordinary.two_field += this.warehouseTabList[i].tj
            this.ordinary.two_price_field += this.warehouseTabList[i].two_price_field
            this.ordinary.two_tj_field += (this.warehouseTabList[i].tj * this.warehouseTabList[i].two_field)
          }
            if (this.warehouseTabList[i].three_field > 0) {
            this.ordinary.three_field += this.warehouseTabList[i].tj
            this.ordinary.three_price_field += this.warehouseTabList[i].three_price_field
            this.ordinary.three_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].three_field
          }
            if (this.warehouseTabList[i].four_field > 0) {
            this.ordinary.four_field += this.warehouseTabList[i].tj
            this.ordinary.four_price_field += this.warehouseTabList[i].four_price_field
            this.ordinary.four_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].four_field
          }
            if (this.warehouseTabList[i].five_field > 0) {
            this.ordinary.five_field += this.warehouseTabList[i].tj
            this.ordinary.five_price_field += this.warehouseTabList[i].five_price_field
            this.ordinary.five_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].five_field
          }
        }else if (this.warehouseTabList[i].type == 2) {
          if (this.warehouseTabList[i].one_field > 0){
            this.special.one_field += this.warehouseTabList[i].tj
            this.special.one_price_field += this.warehouseTabList[i].one_price_field
            this.special.one_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].one_field
          }
          if (this.warehouseTabList[i].two_field > 0) {
            this.special.two_field += this.warehouseTabList[i].tj
            this.special.two_price_field += this.warehouseTabList[i].two_price_field
            this.special.two_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].two_field
          }
          if (this.warehouseTabList[i].three_field > 0) {
            this.special.three_field += this.warehouseTabList[i].tj
            this.special.three_price_field += this.warehouseTabList[i].three_price_field
            this.special.three_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].three_field
          }
          if (this.warehouseTabList[i].four_field > 0) {
            this.special.four_field += this.warehouseTabList[i].tj
            this.special.four_price_field += this.warehouseTabList[i].four_price_field
            this.special.four_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].four_field
          }
          if (this.warehouseTabList[i].five_field > 0) {
            this.special.five_field += this.warehouseTabList[i].tj
            this.special.five_price_field += this.warehouseTabList[i].five_price_field
            this.special.five_tj_field += this.warehouseTabList[i].tj * this.warehouseTabList[i].five_field
          }
        }
      }
    },
    ohtherOk() {
      if (!this.costsTitle) {
        this.$Message.error('请输入费用标题');
        return;
      }
      if (!this.costsAmount) {
        this.$Message.error('请输入费用金额');
        return;
      }
      let data = {
        system_supplier_bill_id: this.SettlementSummary.id,
        relation_id: this.formValidate.relation_id,
        title: this.costsTitle,
        cost: this.costsAmount,
        compute: this.vertical,
        remarks:this.remarks,
      };
      addOtherCostsApi(data).then((res) => {
        this.$Message.success(res.msg);
        this.ohterModal = false;
        this.costsTitle = '';
        this.costsAmount = '';
        this.remarks = '';
        this.formValidate.detail_type = 'special.charges';
        this.searchs();
        this.supplierSummaryInfo(this.bili_id)

        // this.getList(this.SettlementSummary.id);
      }).catch((res) => {
        this.$Message.error(res.msg);
      });
    },
    ohterCancel() {
      this.ohterModal = false;
      this.costsTitle = '';
      this.costsAmount = '';
      this.remarks = '';
      this.formValidate.detail_type = 'special.charges';
      this.supplierSummaryInfo(this.bili_id)

    },
    menusAdd(title) {
      this.ohterModal = true;
    },
    editSpecialCharges(row) {
      this.costsTitle  =row.title
      this.costsAmount=row.cost
      this.remarks=row.remarks
      this.vertical = row.compute
      this.ohterModal = true;
    },
    delspecialCharges(row) {
      let delfromData = {
        title: "确认删除其他费用",
        url: `/supplier_bill/deleteSupplierBillAddSpecial`,
        method: "DELETE",
        ids: {
          title:row.title,
          compute:row.compute,
          system_supplier_bill_id:this.SettlementSummary.id,
          relation_id:this.SettlementSummary.relation_id
        },
        info:"",
        tips: "",
      };
      this.$modalSure(delfromData)
          .then((res) => {
            this.searchs()
            this.supplierSummaryInfo(this.bili_id)
            this.$Message.success(res.msg);
          })
          .catch((res) => {
            this.$Message.error(res.msg);
          });
    },
    confirmPaid(row){
      this.paidModel = true
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      if (res.code === 0) {
        this.formPaid.file_url = res.data.src;
        this.urlList.push(this.formPaid.file_url)
      } else {
        this.$Message.error(res.msg);
      }
    },
    confirmPaidCancel() {
      this.paidModel = false;
      this.formPaid = {};
      this.supplierSummaryInfo(this.bili_id)
    },
    confirmPaidOk() {
      if (!this.formPaid.file_url) {
        this.$Message.error('附件不能为空');
        return;
      }
      let data = {
        system_supplier_bill_id: this.SettlementSummary.id,
        status: 4,
        file_url: this.formPaid.file_url,
      };
      supplierBillSurePaid(data).then((res) => {
        this.$Message.success(res.msg);
        if (res.code == 0){
          this.paidModel = false;
          this.supplierSummaryInfo(this.bili_id)
        }
      }).catch((res) => {
        this.$Message.error(res.msg);
      });
    },
    confirm(row) {
      let delfromData = {
        title: "确认账单",
        url: `supplier_bill/set_status/${row.id}/2`,
        method: "PUT",
        ids: "",
        info:"确定确认账单吗",
        tips:  row.is_del ? '确定确认账单吗' : '确定确认账单吗',
      };
      this.$modalSure(delfromData)
          .then((res) => {
            this.$Message.success(res.msg);
            this.supplierSummaryInfo(this.bili_id)
          })
          .catch((res) => {
            this.$Message.error(res.msg);
          });
    },
    onchangeDetailType(){
      if (this.formValidate.detail_type == "order.income"){
        this.columns = this.orderIncomeColumns
      }else if (this.formValidate.detail_type == "storage.fee"){
        this.columns = this.storageFeeColumns
      }else if (this.formValidate.detail_type == "ob.fee"){
        this.columns = this.obFeeColumns
      }else if (this.formValidate.detail_type == "unloading.fee"){
        this.columns = this.unloadingFeeColumns
      }else if (this.formValidate.detail_type == "special.charges"){
        this.columns = this.specialFeeColumns
      }else if (this.formValidate.detail_type == "shownroom.fee"){
        this.columns = this.shownroomFeeColumns
      }
    },
    formattedDate(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      // 注意：getMonth() 返回 0-11，所以要 +1
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    formatTimeNative(timestamp) {
      const date = new Date(timestamp);
      const now = new Date();
      const isToday =
          date.getDate() === now.getDate() &&
          date.getMonth() === now.getMonth() &&
          date.getFullYear() === now.getFullYear();
      // 时间格式（小时:分钟 + am/pm）
      const timeOptions = {
        hour: 'numeric',
        minute: '2-digit',
        hour12: true,
      };
      const timeString = new Intl.DateTimeFormat('en-US', timeOptions).format(date);

      return isToday ? `Today at ${timeString}` : new Intl.DateTimeFormat('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: 'numeric',
        minute: '2-digit',
        hour12: true,
      }).format(date);
    },
    getSupplierList() {
      getSupplierList().then((res) => {
        this.supplierList = res.data;
      });
    },
    searchs() {

      if (this.formValidate.detail_type == undefined || this.formValidate.detail_type == ""){
        this.$Message.error("账单类型必填!");
        return
      }

      this.formValidate.page = 1;
      this.formValidate.relation_id = this.SettlementSummary.relation_id
      this.onchangeDetailType();
      this.getList(this.SettlementSummary.id);
    },
    // 时间
    onchangeTime(e) {
      this.formValidate.start_time = e[0];
      this.formValidate.end_time = e[1];
    },
    // 列表
    getList(id) {
      this.id = id;
      this.formValidate.id = id;
      this.loading = true;
      supplierBillSummaryList(this.formValidate)
        .then(async (res) => {
          let data = res.data;
          this.tabList = data.list;
          this.total = data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.formValidate.page = index;
      this.getList(this.ids);
    },
    reset() {
      this.formValidate.detail_type = ""
      this.tabList = [];
    },
    // 关闭按钮
    cancel() {
      this.formValidate = {
        ids: '',
        supplier_id: '',
        keyword: '',
        data: '',
        page: 1,
        limit: 500,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.divStyle{
  width: 70px;
}
.other-title{
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.colorred {
  color: #ff5722;
}
.colorgreen {
  color: #009688;
}
.search {
  width: 86px;
  height: 32px;
  background: #1890ff;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.reset {
  width: 86px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid rgba(151, 151, 151, 0.36);
  text-align: center;
  line-height: 32px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.table {
  .ivu-table-default {
    overflow-y: auto;
    max-height: 350px;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 82%;
      display: inline-block;
      vertical-align: middle;

      &-title {
        font-size: 13px;
        color: #000000;
        margin-bottom: 12px;
      }

      &-desc {
        &-sp {
          width: 33.33%;
          color: #17233d;
          font-size: 12px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
.table {
  padding: 0px 30px 15px 30px;
}
.section{
  padding: 25px 0;
  //border-bottom:1px dashed #EEEEEE
}

.title{
  padding-left: 10px;
  border-left: 3px solid #1d2129;
  font-size: 15px;
  line-height: 15px;
  color: #303133;
}


.list {
  display: flex;
  align-items: center;
}


.item {
  flex: 0 0 calc(100% / 3);
  display: flex;
  margin-top: 16px;
  font-size: 13px;
}

.sales{
  display: flex; justify-content: center; align-items: center;text-align: center;padding: 10px 16px;
}

.sales-title {
  width: 60%;
  text-align: left;
}

.sales-debits{
  width: 20%;
}
.sales-credits{
  width: 20%;text-align: right;
}
.sales-bottom {
  position: absolute;bottom: 16px;width: 100%;
}

.price-table {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.price-table th,
.price-table td {
  padding: 8px 15px; /* 优化内间距，比原8px更舒适 */
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.price-table th {
  background-color: #f7f9fc; /* 表头背景色区分 */
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e5e9f2; /* 表头下边框加粗 */
}

.price-table tbody tr {
  transition: background-color 0.2s ease; /* 平滑过渡效果 */
}

.price-table tbody tr:hover {
  background-color: #fafbfc; /* 悬停行背景色变化 */
}

.price-table td:first-child {
  font-weight: 500; /* 第一列（类型）加粗突出 */
  color: #2c3e50;
}

.price-table td:not(:first-child) {
  color: #4a5568; /* 数值列颜色稍浅，突出类型列 */
}

/* 最后一行取消下边框，避免圆角被遮挡 */
.price-table tbody tr:last-child td {
  border-bottom: none;
}
</style>
